import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form} from 'antd';
import {checkStore, areaTreeStore} from '../SudokuStore';
import './ShowStyle.less';

declare let GLOBAL: any;

const FormItem = Form.Item;

@observer
export class SudokuShowModal extends React.Component<any, any> {
    onCancel = () => {
        checkStore.hide();
    }
    render() {
        return (
            <Modal width="400"
                   title="查看九宫格"
                   maskClosable={true}
                   visible={checkStore.visible}
                   onCancel={this.onCancel}
                   footer="">
                <SudokuShowForm/>
            </Modal>
        )
    }
}

@observer
export class SudokuShowForm extends React.Component<any, any> {
    render() {
        const fields = checkStore.getValues();

        const formItemLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 20}
        };

        const formStyle = {
            marginBottom: '5px'
        }

        return (
            <div>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="icons:"
                                  style={formStyle}
                                  {...formItemLayout}>
                            <ul className="iconContainerShow">
                                {
                                    fields.selectSudokuOption.map((item) => {
                                        const icon = _.includes(item.icon, "http") ? item.icon : `http://${item.icon}`

                                        return (
                                            <li className="iconItemShow">
                                                <img src={icon} alt="图片" />
                                                <span className="iconNameShow" title={item.text}>{item.text}</span>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </FormItem>
                    </Col>
                </Row>
            </div>
        )
    }
}